<template>
	<view class="container" :style="{ paddingBottom: `${safeAreaInsets?.bottom}px` }">
		<!--  #ifdef  MP-WEIXIN -->
		<custom :back="true" title="投诉建议"></custom>
		<!--  #endif -->

		<view class="frm">
			<uni-forms ref="frm" :rules="rules" :modelValue="param" label-position="top">
				<!--  #ifdef  MP-WEIXIN -->
					<view style="font-size: 14px;">此投诉为本小程序自有投诉渠道，非微信官方投诉渠道</view>
						<!--  #endif -->
				<uni-forms-item label="标题" required name="title">
					<uni-easyinput v-model="param.title" placeholder="请输入标题" :maxlength="20" />
				</uni-forms-item>

				<uni-forms-item label="描述" required name="content">
					<uni-easyinput type="textarea" v-model="param.content" placeholder="请输入具体的描述" :maxlength="100" />
				</uni-forms-item>
			</uni-forms>

			<view class="btn" @click="submit">提交</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive } from 'vue'
	import { storeToRefs } from 'pinia'
	import { useSystemStore } from '@/stores/system'
	import { useUserStore } from '@/stores/user'
	import { addProposal } from '@/api/index'
	import { toast } from '@/utils/index'

	const systemStore = useSystemStore()
	const { safeAreaInsets } = storeToRefs(systemStore)
	const userStore = useUserStore()

	const rules = ref({
		title: {
			rules: [{
				required: true,
				errorMessage: '标题不能为空'
			}, {
				maxLength: 20,
				errorMessage: '标题最多输入20个字'
			}]
		},
		content: {
			rules: [{
				required: true,
				errorMessage: '描述不能为空'
			}, {
				maxLength: 100,
				errorMessage: '描述最多输入100个字'
			}]
		}
	})

	const frm = ref(null)
	const param = reactive({
		app_id: userStore.loginInfo.app_id,
		title: '',
		content: ''
	})

	const submit = () => {
		frm.value.validate().then(async () => {
			try {
				await addProposal(param)
				toast('提交成功', () => {
					uni.navigateBack()
				})
			} catch (e) {
				//TODO handle the exception
			}
		}).catch(() => { })
	}
</script>

<style scoped lang="scss">
	.container {
		background: #fff;

		.frm {
			padding: 30rpx;

			.btn {
				margin-top: 80rpx;
				height: 88rpx;
				@include tx(32rpx, 88rpx);
				color: #fff;
				text-align: center;
				border-radius: 44rpx;
				background: #FF6918;
			}
		}
	}
</style>